<template>
  <el-dialog :title='title' :visible.sync="dialogFormVisible" @closed="$emit('update:activated', false)" width="800px">
    <el-card>
      <div class="dialogStyle" style="display: flex;flex-direction: column">
        <el-table
          :data="search_result"
          size="mini"
          :height="600"
          class="search-result-table"
          style="flex: 1"
          border
          tooltip-effect="dark">

          <el-table-column prop="createUser" align="center" :label="$t('pageTable.createUser')"  />
          <el-table-column :label="$t('pageTable.createTime')" show-overflow-tooltip>
            <template slot-scope="scope">
              {{scope.row.createTime != null ?$moment(scope.row.createTime,'YYYYMMDDHHmmss').format('YYYY-MM-DD h:mm:ss a') : ''}}
            </template>
          </el-table-column>
          <el-table-column prop="fileName" align="center" :formatter="price" :label="$t('pageTable.img')"  >
            <template slot-scope="scope">
              <a :disabled="subject.hasPermissions('*')" style="text-decoration: underline;" @click="toImg(scope.row.filePath,scope.row.fileName)">{{scope.row.fileName}}</a>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </el-dialog>
</template>

<script>
  import activityService from '@/api/basedata/supplier'
  import Viewer from 'viewerjs';
  export default {
    name: "ReceiveGoods",
    props:{
      supplierCode:String,
    },
    data(){
      return{
        dialogFormVisible: true,
        title:this.$t('pageTable.PriceRecord'),
        viewer_instance: null,
        search_result         : [],
      }
    },
    async mounted(){
      this.exec_search();
    },
    destroyed() {
      if (this.viewer_instance) {
        this.viewer_instance.destroy();
      }
    },
    methods:{
      price(row, column, cellValue, index){
        if (cellValue) {
          return cellValue.toFixed(6)
        }else {
          return ""
        }
      },
      toImg(filePath,fileName) {
        if(fileName.indexOf(".pdf") >0){
          window.open(`/upload/`+fileName);
          return;
        }
        let options = {
          hidden: evt => viewer.destroy(),
        };
        //取当前最大的z-index
        let wrappers = Array.from(document.getElementsByClassName('el-dialog__wrapper'));
        let max_zIndex = wrappers.map(el => el.style.zIndex || 0).reduce(Math.max, 0);
        let zIndex = max_zIndex ? max_zIndex + 10 : undefined;

        if (zIndex) {
          options.zIndex = zIndex;
        }

        let el = document.createElement('img');
        el.src = `/upload/`+fileName;

        const viewer = new Viewer(el, options);
        viewer.show();
        this.viewer_instance = viewer;
      },
      exec_search() {
        activityService.findMaterialPriceAndFile({supplierCode:this.supplierCode}).then(resp => {
          this.search_result = resp.data.resultList;                //视图展示查询结果
        }, err => {
          console.error(err);
        })
      },
      cancel() {
        this.dialogFormVisible = false
      },

    }
  }
</script>

<style scoped>

</style>